import React from "react";
import './TodoMain.css';
import { useSelector } from "react-redux";

export default function TodoMain() {
  //获取 todo 的状态
  let todo = useSelector(state => state.todo);
  return (
    <ul className="todo-main">
      {
        todo.map(item => {
          return <li key={item.id}>
                  <label>
                    <input type="checkbox" checked={item.done} />
                    <span className={item.done ? 'done' : undefined}>{item.title}</span>
                  </label>
                  <button className="btn btn-danger">删除</button>
                </li>
        })
      }
    </ul>
  );
}
